<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱多肉</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/love.css">
    <link rel="stylesheet" href="../css/comm.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<header>
    <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
</header>
   <div id="app">
    <div class="container-fluid">
        <h2>推荐排行</h2>
        <!-- 内容-->
       <div class="row">
           <div class="col-lg-4 col-md-6 col-sm-12" v-for="item in plants">
                   <div class="media  m-2 p-3 border">
                       <img :src="item.image_path" alt="图片丢了" class="w-50 mr-3"/>
                       <div class="media-body p-2">
                        
                           <a :href="`detail.html?id=`+item.plant_id">
                               <p>{{item.title}}</p>
                           </a>
                           <p class="text-muted">阅读({{item.read_count}})</p>
                       </div>
                   </div>
           </div>
           
       </div>
        <!-- 分页-->
        <div class="row">
            <div class="col-5 offset-7">
                <ul class="pagination">
                    <li class="page-item "><a href="#" class="page-link " @click="switchPage(page-1)">上一页</a></li>
                    
                        
                    <li class="page-item "><a href="#" class="page-link" v-show="page-1!=0" >{{page-1}}</a></li>
                    <li class="page-item active"><a href="#" class="page-link">{{page}}</a></li>
                    <li class="page-item "><a href="#" class="page-link" v-show="page+1!=maxPage" >{{page+1}}</a></li>
                   
                    
                    
                    <li class="page-item"><a href="#" class="page-link" @click="switchPage(page+1)">下一页</a></li>
                </ul>
            </div>
        </div>
        <!-- 底部-->
        <div class="row my-4">
            <div class="text-center w-100">
               Copright&nbsp;&copy;&nbsp;2012-2015&nbsp;岁草SUICAO.COM
            </div>
        </div>
    </div>
   </div>
</body>
<script>
    new Vue({
         el: "#app",
         data: {
            search:"",// 这是搜索框内容
            page:1,// 当前页数
            plants:[],// 文章列表
            count:0,// 总数
            maxPage:1,// 最大页数
            type:""//分类编号
         },
         //网页一进来就调用
         created() {
            // 从url获取搜索内容
            this.getIdFromUrl()
            // 获取文章列表
            this.getList()
            // 分页
            this.getCount()
           
         },
         // 方法全部写在这
         methods: {
            // 切换页数
            switchPage(e){
                // 第0页
                if(e==0){
                    return
                }
                // 最大页数
                if(e==this.maxPage){
                    return
                }
                // 获取当前页的数据
                this.page = e
                this.getList()
            },
            // 计算最大页数
            getMaxPage(){
                
            },
            // 从url获取搜索栏内容
            getIdFromUrl() {  
                const searchParams = new URLSearchParams(window.location.search);  
                this.search = searchParams.get('search');  
                this.type = searchParams.get('type');  
            },
            // 查询方法
            async getList(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/list?search='+this.search+'&page='+this.page+'&type='+this.type);
                        const data = await response.json();
                        // 请求成功时更新数据
                        this.plants = data.data
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
            // 获取总条数
            async getCount(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/listCount?search='+this.search+'&type='+this.type);
                        const data = await response.json();
                        if(data.data!=null){
                            // 请求成功时更新数据
                            this.count = data.data
                            this.maxPage = Math.ceil(this.count/6)
                            console.log(this.maxPage)
                        }
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            }
            
         },
         beforeDestroy() {
          
         },
     })
   </script>
</html>